<template>
  <div class="nav_bar">
    <div class="nav_click">
      <div class="nac_bar">
        <a-steps progress-dot :current="current" direction="vertical" @change="onChange">
          <a-step
            :title="item"
            v-for="(item, i) in arrgnmc"
            :key="i"
            description
            @click="onChange(i)"
          />
          <!-- <a-step title="报价单制作" description @click="onChange(12)" />
        <a-step title="合同单制作" description @click="onChange(13)" />
          <a-step title="商贸通联系人" description @click="onChange(14)" />-->
        </a-steps>
        <div class="unordered">
          <a-icon class="unordered_ico" type="unordered-list" />
          <div class="uno_hover">
            <p
              v-for="(item, i) in gsmcdata"
              :key="i"
              @click="gsmcclick(i)"
              :class="ssgs_name==i?'active_p':''"
            >{{item}}</p>
            <!-- <p @click="gsmcclick(1)" :class="ssgs_name==1?'active_p':''">西安万联万通公司</p> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      current: 0,
      arrgnmc: "",
      arrgnqx: "",
      path: "",
      ssgs_name: "",
      gsmcdata: ""
    };
  },

  methods: {
    onChange(current) {
      var path = this.$route.path.split("/");
      // var type = this.$route.path.query.type;
      // console.log(path[1])

      this.$store.state.path_num = current;
      sessionStorage.setItem("path_num", current);

      // console.log(this.arrgnqx[this.$store.state.path_num]);
      if (
        this.arrgnqx[this.$store.state.path_num] == "khml" ||
        this.arrgnqx[this.$store.state.path_num] == "khml?type=new" ||
        this.arrgnqx[this.$store.state.path_num] == "khml?type=more" ||
        this.arrgnqx[this.$store.state.path_num] == "khml?type=no"
      ) {
        this.$router.push("/" + this.arrgnqx[this.$store.state.path_num]);
        this.reload();
      } else {
        this.$router.push("/" + this.arrgnqx[this.$store.state.path_num]);
      }
    },
    gsmcclick(value) {
      sessionStorage.setItem("ssgs_name", value);
      this.$router.push("/smt");
    }
  },

  created() {
    this.arrgnmc = sessionStorage.getItem("arrgnmc").split(",");
    this.arrgnqx = sessionStorage.getItem("arrgnqx").split(",");
    this.gsmcdata = sessionStorage.getItem("gsmcdata").split(",");
    //  console.log("-----------",this.gsmcdata)
    //  this.$store.state.jgqx=sessionStorage.getItem("arrjgqx")
    // console.log( this.arrgnmc)
    // console.log( this.arrgnqx)
    this.ssgs_name = sessionStorage.getItem("ssgs_name");
    this.$store.state.smt_token = sessionStorage.getItem("smt_token");
    // this.current = this.$store.state.path_num;
    this.current = Number(sessionStorage.getItem("path_num"));
    // console.log(this.arrgnqx);
    // console.log(this.$store.state.path_num);
  }
};
</script>

<style lang='less'>
.left_bcg .hedlist {
  width: 82% !important;
}
// .header_sele {
//   width: 80% !important;
// }
.sele {
  margin-bottom: 0 !important;
}
.header_sele {
  padding: 10px 20px !important;
  margin: 15px !important;
  box-shadow: none !important;
}
.nav_bar {
  position: fixed;
  right: 0;
  width: 7%;
  margin-top: 50px;
  height: 100%;
  display: inline-block;
  background: #f3f7f9;
  z-index: 99;
  .nav_click {
    padding: 50px 20px;
    background: #fff;
    height: 100%;
    cursor: pointer;
    ul {
      li {
        margin: 20px 0;
      }
    }
  }
  .nac_bar {
    position: relative;
  }
  .unordered {
    position: absolute;
    bottom: -189px;
    width: 50px;
    height: 50px;
    // background: #fff;
    box-shadow: 0 0 5px #ccc;
    border-radius: 50px;
    line-height: 50px;
    // transition: all 0.5;
    .unordered_ico {
      font-size: 20px;
    }
    .uno_hover {
      background: #fff;
      position: absolute;
      top: -78px;
      left: -103px;
      width: 188px;
      line-height: 40px;
      box-shadow: 0 0 5px #ccc;
      display: none;
      // opacity: 0;

      p {
        margin: 0;
        font-size: 12px;
        border-bottom: 1px solid #f1f1f1;
      }
      .active_p {
        color: #40a9ff;
        background: #e6f7ff;
      }

      p:hover {
        background: #f5f5f5;
      }
    }
  }

  .unordered:hover .uno_hover {
    display: block;
    // opacity: 1;
  }

  .ant-steps-vertical .ant-steps-item-content {
    min-height: 20px !important;
    text-align: left;
  }
}

.left_bcg {
  width: 82% !important;
  left: 1% !important;
  display: inline-block !important;
}
.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot {
  width: 1px !important;
  height: 29px !important;
}
.ant-steps-vertical > .ant-steps-item:not(:last-child) > .ant-steps-item-tail {
  display: none !important;
}
.ant-steps-vertical.ant-steps-dot .ant-steps-item .ant-steps-icon-dot {
  left: -12px;
}
.ant-steps-item-finish
  .ant-steps-item-icon
  > .ant-steps-icon
  .ant-steps-icon-dot {
  background: #ccc !important;
}
.ant-steps-vertical.ant-steps-dot
  .ant-steps-item:first-child
  .ant-steps-icon-dot {
  left: -12px !important;
}
.ant-steps-vertical.ant-steps-dot .ant-steps-item-process .ant-steps-icon-dot {
  left: -12px !important;
}
.ant-steps-vertical.ant-steps-dot .ant-steps-item-icon {
  margin: 0 !important;
}
.ant-steps-dot .ant-steps-item-title {
  font-size: 12px;
}
.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title {
  color: rgb(24, 144, 255) !important;
}
.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title {
  color: #666 !important;
}
.ant-steps-dot .ant-steps-item-content {
  // padding-top: 7px;
}
.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon {
  // display: none;
}
.ant-steps-dot .ant-steps-item-content {
  width: 88px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot::after {
  width: 0 !important;
  height: 0 !important;
}
.ant-steps-dot
  .ant-steps-item-process
  .ant-steps-item-icon
  .ant-steps-icon-dot {
  top: 1px;
}
@media (max-width: 1600px) {
  .unordered {
    bottom: -76px !important;
  }
  // .bjdzz_box {
  //   width: 93% !important;
  // }
  // .left_bcg .hedlist {
  //   width: 77% !important;
  // }
}
</style>
